<template>
  <div class="playground-img">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="591"
      height="383"
    >
      <image
        x="0"
        y="0"
        width="100%"
        height="100%"
        xlink:href="../../assets/image/playerGround/playground.png"
        preserveAspectRatio="xMinYMin meet"
      />

      <defs>
        <image
          id="ball"
          x="0"
          y="0"
          width="4%"
          height="4%"
          xlink:href="../../assets/image/playerGround/ball.svg"
          preserveAspectRatio="xMinYMin meet"
        />
      </defs>

      <circle
        v-for="player in homeTeam"
        v-if="homeTeam"
        :cx="player.x1"
        :cy="player.y1"
        r="10"
        stroke="black"
        stroke-width="2"
        fill="red"
      />
      <!--        <text v-for="player in homeTeamNumber"-->
      <!--              :x="player.x1"-->
      <!--              :y="player.y1"-->
      <!--              text-anchor="middle"-->
      <!--              fill="black"-->
      <!--              font-weight="bold">{{player.number}}</text>-->

      <circle
        v-for="player in awayTeam"
        v-if="awayTeam"
        :cx="player.x1"
        :cy="player.y1"
        r="10"
        stroke="black"
        stroke-width="2"
        fill="green"
      />
      <!--      <text v-for="player in awayTeamNumber"-->
      <!--            :x="player.x1"-->
      <!--            :y="player.y1"-->
      <!--            text-anchor="middle"-->
      <!--            fill="black"-->
      <!--            font-weight="bold">{{player.number}}</text>-->
    </svg>
    <el-button @click="start">开始</el-button>
    <el-button @click="stop">停止</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "UwbPlayGround",
  props: {},
  data() {
    return {
      homeTeam: [],
      awayTeam: [],
      ball: [],
      fakeData: [
        [
          { number: 1, x1: "33%", y1: "63%" },
          { number: 2, x1: "44%", y1: "70%" },
          { number: 3, x1: "36%", y1: "50%" },
          { number: 4, x1: "55%", y1: "66%" },
          { number: 5, x1: "32%", y1: "51%" },
          { number: 6, x1: "60%", y1: "32%" },
          { number: 7, x1: "79%", y1: "54%" },
          { number: 8, x1: "79%", y1: "54%" },
        ],
        [
          { number: 11, x1: "33%", y1: "63%" },
          { number: 12, x1: "44%", y1: "70%" },
          { number: 13, x1: "36%", y1: "50%" },
          { number: 14, x1: "55%", y1: "66%" },
          { number: 15, x1: "32%", y1: "51%" },
          { number: 16, x1: "60%", y1: "32%" },
          { number: 17, x1: "79%", y1: "54%" },
          { number: 18, x1: "79%", y1: "54%" },
        ],
      ],
      interval: "",
      time: 0.04,
    };
  },
  watch: {
    positionData: {},
  },
  methods: {
    accAdd(arg1, arg2) {
      var r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
    },
    start() {
      this.interval = setInterval(() => {
        this.getTracksData(this.time);
        this.time = this.accAdd(this.time, 0.04).toFixed(2);
        console.log(this.time);
      }, 50);
    },
    stop() {
      clearInterval(this.interval);
    },
    async getTracksData(time) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/hometracks/time/list/${time}`
      );
      this.homeTeam = data[0];
      this.awayTeam = data[1];
      this.ball = data[2];
    },
  },
  computed: {
    homeTeamNumber() {
      return this.homeTeam.map((player) => {
        return {
          ...player,
          y1: parseInt(player["y1"]) + 1.7 + "%",
        };
      });
    },
    awayTeamNumber() {
      return this.awayTeam.map((player) => {
        return {
          ...player,
          y1: parseInt(player["y1"]) + 1.7 + "%",
        };
      });
    },
    mockData() {
      function randomNum(minNum, maxNum) {
        switch (arguments.length) {
          case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
          case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
          default:
            return 0;
            break;
        }
      }
      const arr = [];
      for (let j = 1; j < 100; j++) {
        for (let i = 1; i < 8; i++) {
          let obj = {};
          obj.number = i;
          obj.x1 = randomNum(i * 10, (i + 1) * 10) + "%";
          obj.y1 = randomNum(i * 10, (i + 1) * 10) + "%";
          arr.push(obj);
        }
      }
      return arr;
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    clearInterval(this.interval);
    this.interval = null;
  },
};
</script>

<style scoped>
.playground-img {
  width: 591px;
  height: 383px;
}
</style>
